<template>
	<view>
		<uni-popup catchtouchmove="preventTouchMove" @touchmove.stop.prevent="moveHandle" style="height: 100%;" ref="popup" type="center" :maskClick="false">
			<view class="advert-pop" @touchmove.stop.prevent="moveHandle">
				<view class="content">
					<image class="advert-img" src="../../static/img/answer.png" />
					<view class="btn">
						<view class="camera" @click="playAdvertVideo">
							<image style="height: 45px;width: 200px;" src="../../static/img/camera_bg.png">
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 
			template-one    初版测试流程  不存在selectTemplate
			template-two    初版测试流程 （已废弃）
			template-three  纯文字        selectTemplate == '0'
			template-four   四张图        selectTemplate == '2'
			template-five   一图或一语音  selectTemplate == '1'
		 -->
		<!-- <template-one :data="data" @complete="showPop"></template-one> -->
		<template-one v-if="!data.selectTemplate" :data="data" @complete="showPop"></template-one>
		<template-three v-if="data.selectTemplate == '0'" :data="data" @complete="showPop"></template-three>
		<template-four v-if="data.selectTemplate == '2'" :data="data" @complete="showPop"></template-four>
		<template-five v-if="data.selectTemplate == '1'" :data="data" @complete="showPop"></template-five>

		<!-- <template-two
			v-if="data.gameContent.type === 2"
			:data="data"
			@complete="showPop">
		</template-two> -->
	</view>
</template>

<script>
	import TemplateOne from './template-one.vue'
	import TemplateTwo from './template-two.vue'
	import TemplateThree from './template-three.vue'
	import TemplateFour from './template-four.vue'
	import TemplateFive from './template-five.vue'
	export default {
		props: ['data'],
		components: {
			TemplateOne,
			TemplateTwo,
			TemplateThree,
			TemplateFour,
			TemplateFive,
		},
		data() {
			return {
				isAdvert: true, // 是否需要获取广告
				isEnded: false, // 用户是否看完视频
				isVideoPlay: false, // 广告是否播放中
				videoAd: null,
			}
		},
		methods: {
			moveHandle() {
				return
			},
			preventTouchMove(e) {
				console.log(e);
			},
			showPop() { // 显示弹框
				this.$refs.popup.open()
			},
			closePop: function() {
				this.$refs.popup.close()
			},
			playAdvertVideo(){
				this.$emit("playShowAd")
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @keyframes dynamic {
	// 	0% {
	// 		transform: scale(0.85)
	// 	}
	// 	50% {
	// 		transform: scale(1)
	// 	}
	// 	100% {
	// 		transform: scale(0.85)
	// 	}
	// }// animation: 1s dynamic infinite;
	.uni-popup__wrapper {
		height: 100%;
	}
	.advert-pop {
		z-index: 999;
		width: 100vw;
		// height: 758rpx;
		height: 105vh;
		background-color: rgba(0,0,0,.6);
		
		.content {
			// width: 604rpx;
			// height: 758rpx;
			height: 600rpx;
			margin: 0rpx 73rpx 0;
			position: relative;
			transform: translateY(200px);
		}

		.advert-img {
			width: 100%;
			height: 100%;
		}

		.btn {
			width: 100%;
			height: 120rpx;
			position: absolute;
			bottom: -25px;
			border-radius: 20rpx;

			.camera {
				height: 80rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				padding: 0 40rpx;
				margin: 25rpx 60rpx 15rpx 60rpx;
				color: #FFFFFF;
				border-radius: 54rpx;

				.icon {
					width: 46rpx;
					height: 40rpx;
					margin-right: 30rpx;
				}
			}
		}

		.close {
			width: 50rpx;
			height: 50rpx;
			margin: 70rpx auto 0 auto;
		}
	}
</style>
